<template>
  <div class="growth-report">
    <!-- 增长指标 -->
    <el-row :gutter="20" class="stat-cards">
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-label">今日新增</div>
          <div class="stat-value">{{ todayNew }}</div>
          <div class="stat-compare">昨日: {{ yesterdayNew }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-label">本周新增</div>
          <div class="stat-value">{{ weekNew }}</div>
          <div class="stat-compare">上周: {{ lastWeekNew }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-label">本月新增</div>
          <div class="stat-value">{{ monthNew }}</div>
          <div class="stat-compare">上月: {{ lastMonthNew }}</div>
        </div>
      </el-col>
      <el-col :span="6">
        <div class="stat-card">
          <div class="stat-label">增长率</div>
          <div class="stat-value success">{{ growthRate }}%</div>
          <div class="stat-compare">环比上月</div>
        </div>
      </el-col>
    </el-row>

    <!-- 增长趋势图 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📈 会员增长趋势</span>
      </template>
      <div class="chart-container" ref="growthTrendChart"></div>
    </el-card>

    <!-- 渠道来源 -->
    <el-row :gutter="20" style="margin-top: 20px;">
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>📱 注册渠道分布</span>
          </template>
          <div class="chart-container" ref="channelChart"></div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card>
          <template #header>
            <span>🎯 会员来源统计</span>
          </template>
          <el-table :data="channelData" max-height="350">
            <el-table-column prop="channel" label="渠道" width="150" />
            <el-table-column prop="count" label="人数" width="100">
              <template #default="{ row }">
                <el-tag>{{ row.count }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column prop="rate" label="占比" width="100">
              <template #default="{ row }">
                {{ row.rate }}%
              </template>
            </el-table-column>
            <el-table-column prop="trend" label="趋势" width="100">
              <template #default="{ row }">
                <el-tag :type="row.trend > 0 ? 'success' : 'danger'">
                  {{ row.trend > 0 ? '+' : '' }}{{ row.trend }}%
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </el-card>
      </el-col>
    </el-row>

    <!-- 新增明细 -->
    <el-card style="margin-top: 20px;">
      <template #header>
        <span>📋 新增会员明细</span>
      </template>
      <el-table :data="newMembersData" border stripe>
        <el-table-column prop="date" label="日期" width="120" />
        <el-table-column prop="newMembers" label="新增人数" width="100">
          <template #default="{ row }">
            <el-tag type="success">{{ row.newMembers }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="channel" label="主要渠道" width="120" />
        <el-table-column prop="firstOrderRate" label="首单转化率" width="120">
          <template #default="{ row }">
            {{ row.firstOrderRate }}%
          </template>
        </el-table-column>
        <el-table-column prop="avgConsumption" label="首单均价" width="120">
          <template #default="{ row }">
            ¥{{ row.avgConsumption }}
          </template>
        </el-table-column>
        <el-table-column prop="activeRate" label="活跃率" width="100">
          <template #default="{ row }">
            {{ row.activeRate }}%
          </template>
        </el-table-column>
      </el-table>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import * as echarts from 'echarts'

const props = defineProps({
  dateRange: { type: Array, default: () => [] }
})

const todayNew = ref(234)
const yesterdayNew = ref(189)
const weekNew = ref(1567)
const lastWeekNew = ref(1234)
const monthNew = ref(4890)
const lastMonthNew = ref(4120)
const growthRate = ref(18.7)

const channelData = ref([
  { channel: '微信小程序', count: 12345, rate: 35.6, trend: 12.5 },
  { channel: 'APP注册', count: 9876, rate: 28.5, trend: 8.3 },
  { channel: '门店扫码', count: 6543, rate: 18.9, trend: -2.1 },
  { channel: '推荐注册', count: 4321, rate: 12.5, trend: 25.8 },
  { channel: '其他', count: 1567, rate: 4.5, trend: 3.2 }
])

const newMembersData = ref([
  { date: '2024-01-20', newMembers: 234, channel: '微信小程序', firstOrderRate: 45.3, avgConsumption: 286, activeRate: 78.5 },
  { date: '2024-01-19', newMembers: 189, channel: 'APP注册', firstOrderRate: 42.1, avgConsumption: 278, activeRate: 75.2 }
])

const growthTrendChart = ref(null)
const channelChart = ref(null)

onMounted(() => {
  initGrowthTrendChart()
  initChannelChart()
})

const initGrowthTrendChart = () => {
  const chart = echarts.init(growthTrendChart.value)
  chart.setOption({
    tooltip: { trigger: 'axis' },
    legend: { data: ['新增会员', '累计会员'] },
    xAxis: {
      type: 'category',
      data: ['1月', '2月', '3月', '4月', '5月', '6月', '7月']
    },
    yAxis: [
      { type: 'value', name: '新增人数' },
      { type: 'value', name: '累计人数' }
    ],
    series: [
      {
        name: '新增会员',
        type: 'bar',
        data: [3450, 3980, 4120, 3890, 4250, 4580, 4890],
        itemStyle: { color: '#667eea' }
      },
      {
        name: '累计会员',
        type: 'line',
        yAxisIndex: 1,
        data: [112340, 116320, 120440, 124330, 128580, 133160, 138050],
        itemStyle: { color: '#f5576c' }
      }
    ]
  })
}

const initChannelChart = () => {
  const chart = echarts.init(channelChart.value)
  chart.setOption({
    tooltip: { trigger: 'item' },
    series: [
      {
        name: '注册渠道',
        type: 'pie',
        radius: ['40%', '70%'],
        data: [
          { value: 12345, name: '微信小程序' },
          { value: 9876, name: 'APP注册' },
          { value: 6543, name: '门店扫码' },
          { value: 4321, name: '推荐注册' },
          { value: 1567, name: '其他' }
        ]
      }
    ]
  })
}
</script>

<style scoped>
.growth-report {
  padding: 20px 0;
}

.stat-cards {
  margin-bottom: 20px;
}

.stat-card {
  padding: 30px;
  background: white;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05);
}

.stat-label {
  font-size: 14px;
  color: #909399;
  margin-bottom: 15px;
}

.stat-value {
  font-size: 36px;
  font-weight: bold;
  color: #303133;
  margin-bottom: 10px;
}

.stat-value.success {
  color: #67c23a;
}

.stat-compare {
  font-size: 13px;
  color: #606266;
}

.chart-container {
  height: 400px;
}
</style>

